<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
    <embed src="music/心如止水 - Ice Paper.mp3" autostart="true" loop="true" hidden="true"></embed>	
	<style>
		*{margin: 0px;padding: 0px;list-style: none;}
		body{background: #000;}
		.outer{width: 250px;height: 160px;position: relative;left: 42%;margin-top: 150px;-webkit-transform-style:preserve-3d;-webkit-transform:rotateX(-10deg);-webkit-perspective:1000px;}
		.box{width: 100%;height: 100%;position: absolute;-webkit-transform-style:preserve-3d;-webkit-animation:rotate 10s linear infinite;}
		.box li{width: 150px;height: 200px;position: absolute;left: 50px;top: 10px;border:1px solid black;border-radius: 10px;-webkit-box-reflect:below 10px -webkit-linear-gradient(top,rgba(0,0,0,0)50%,rgba(0,0,0,0.5)100%);overflow: hidden;backface-visibility: visible;-webkit-transition:all 0.8s linear;}
		.box li img{width: 150px;height: 200px;}
		.box li:nth-child(1){-webkit-transform:rotateY(0deg)translateZ(200px);}
		.box li:nth-child(2){-webkit-transform:rotateY(45deg)translateZ(76px);}
		.box li:nth-child(3){-webkit-transform:rotateY(90deg)translateZ(200px);}
		.box li:nth-child(4){-webkit-transform:rotateY(135deg)translateZ(76px);}
		.box li:nth-child(5){-webkit-transform:rotateY(180deg)translateZ(200px);}
		.box li:nth-child(6){-webkit-transform:rotateY(225deg)translateZ(76px);}
		.box li:nth-child(7){-webkit-transform:rotateY(270deg)translateZ(200px);}
		.box li:nth-child(8){-webkit-transform:rotateY(315deg)translateZ(76px);}
		@keyframes rotate{
			from{-webkit-transform:rotateX(-16deg)rotateY(0deg);}
			to{-webkit-transform:rotateX(-16deg)rotateY(360deg);}
		}
		.box:hover li:nth-child(1){-webkit-transform:rotateY(315deg)translateY(-100px)translateZ(280px);-webkit-box-reflect:below -201px}
		.box:hover li:nth-child(2){-webkit-transform:rotateY(270deg)translateY(-100px)translateZ(280px);-webkit-box-reflect:below -201px}
		.box:hover li:nth-child(3){-webkit-transform:rotateY(225deg)translateY(-100px)translateZ(280px);-webkit-box-reflect:below -201px}
		.box:hover li:nth-child(4){-webkit-transform:rotateY(180deg)translateY(-100px)translateZ(280px);-webkit-box-reflect:below -201px}
		.box:hover li:nth-child(5){-webkit-transform:rotateY(135deg)translateY(-100px)translateZ(280px);-webkit-box-reflect:below -201px}
		.box:hover li:nth-child(6){-webkit-transform:rotateY(90deg)translateY(-100px)translateZ(280px);-webkit-box-reflect:below -201px}
		.box:hover li:nth-child(7){-webkit-transform:rotateY(45deg)translateY(-100px)translateZ(280px);-webkit-box-reflect:below -201px}
		.box:hover li:nth-child(8){-webkit-transform:rotateY(0deg)translateY(-100px)translateZ(280px);-webkit-box-reflect:below -201px}
	</style>
</head>
	<body>
	<div class="outer">
		<ul class="box">
<li><img src="img/1.jpg" alt=""></li>
<li><img src="img/2.jpg" alt=""></li>
<li><img src="img/3.jpeg" alt=""></li>
<li><img src="img/4.jpeg" alt=""></li>
<li><img src="img/5.jpg" alt=""></li>
<li><img src="img/6.jpg" alt=""></li>
<li><img src="img/7.jpg" alt=""></li>
<li><img src="img/8.jpg" alt=""></li>
<li><img src="img/9.jpg" alt=""></li>
<li><img src="img/10.jpg" alt=""></li>
<li><img src="img/11.jpg" alt=""></li>
<li><img src="img/12.jpg" alt=""></li>
<li><img src="img/13.jpg" alt=""></li>
<li><img src="img/14.jpg" alt=""></li>
		</ul>
	</div>
</body>
</html>